<template>
	<div class="destination">
		<div class="top">
			<b>{{photo_mdd.content}}</b><span>更多<i class="iconfont">&#xe678;</i></span>
		</div>
		<div class="blue1">
				<div class="blue_left">
					<img :src="photo_mdd.banner[0].media_thumb">
					<span>{{photo_mdd.banner[0].title}}</span>
				</div>
				<div class="blue_right">
					<div class="blue_top">
						<img :src="photo_mdd.banner[1].thumb">
						<span>{{photo_mdd.banner[1].title}}</span>
					</div>
					<div class="blue_top">
						<img :src="photo_mdd.banner[2].thumb">
						<span>{{photo_mdd.banner[2].title}}</span>
					</div>
				</div>
			</div>
			<div class="blue2">
				<div class="blue3" v-for='item in photo_mdd.data'>
					<img :src="item.thumb">
					<p>{{item.title}}</p>
				</div>
			</div>
	</div>
</template>
<script>
	export default{
		props:['photo_mdd']
	}
</script>
<style lang='stylus' scoped>
	.top{
		display: flex;
		width: 100%;
		justify-content: space-between;
		padding:.3rem .26rem 0 0;
		font-size: .45rem;
		border-top: .3rem solid #f5f5f5;
		padding-bottom: .26rem;
		b{
			padding-left: .6rem;
			border-left: .1rem solid #f4d101;
			color: #f4d101;
		}
		span{
			color: #7d7b7b;
			font-size: .35rem;
		}
	}
	.blue1{
		width: 100%;
		display: flex;
		justify-content: space-between;
		.blue_left{
			width: 71.5%;
			position: relative;
			img{
				width: 100%;
			}
			span{
				position: absolute;
				color: #fff;
				font-size: .36rem;
				bottom: 10px;
				left: 10px;
			}
		}
		.blue_right{
			width: 28%;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			position: relative;
			.blue_top{
				width: 100%;
				position: relative;
				height: 50%;
				img{
					width: 100%;
					height: 2rem;
				}
				span{
					position: absolute;
					color: #fff;
					font-size: .36rem;
					left: .22rem;
					bottom: .2rem;
				}
			}
		}
	}
	.blue2{
		width: 100%;
		display: -webkit-box;
		overflow-y: scroll;
		padding:.13rem;
		.blue3{
			width: 30%;
			background: #fff;
			padding-bottom: 6px;
			margin:0 .13rem;
			position: relative;
			border-radius: 10px;
			overflow:hidden;
			img{
				width: 100%;
				height: 2.6rem;
			}
			p{
				font-size: .36rem;
				width: 100%;
	            text-align: center;
	            position:absolute;
	            bottom: .2rem;
	            font-weight: bold;
	            color: #fff;
	            background: rgba(0,0,0,.5);
	            padding:.2rem 0;
			}
		}
	}
</style>